既然這系列叫JS30,就應該要有30堂課,但由於我第一天寫了個序,導致後面只剩29篇的quotaㄏㄏ。所以今天買一送一,給各位兩個實作,分別是影片速度控制器跟倒數計時器。
影片速度控制器在之前第十一堂有使用過了,這次只是換個調整方式,是用mousemove的方法在右邊的bar滑動來調整。概念大同小異,就是如何在bar的元素中透過滑鼠的位置來得到正確的讀數。下面是實作範例:
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const height = Math.round(percent * 100) + '%';
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
倒數計時器的部分比較複雜些,其函式分為幾個部分:
Date.now()
,並呼叫下面的displayTimeLeft(seconds)。要注意這邊用到setInterval(),裡面必須是每次都重新抓取Date.now()
,不能只是某個變數-1,因為當你切換頁籤到別的頁面,或是有時候滾輪離開畫面,setInterval就會暫停執行。所以這裡要每次抓新的時間,確保時間正確。